<html>
  <head>
    <title>Convert a file to a base64 request</title>

    <script type="text/javascript">
      function form_submit(e) {
        console.log(e);

        var resultOutput = document.getElementById('resultOutput');
        var fileInput = document.getElementById('fileInput');
        var fieldInput = document.getElementById('fieldInput');

        makeRequestBase64(fileInput.files[0], fieldInput.value, function (
          err,
          result,
        ) {
          resultOutput.value = result;
        });

        return false;
      }

      function makeRequestBase64(file, fieldName, cb) {
        var boundary =
          '\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/';
        var crlf = '\r\n';

        var reader = new FileReader();
        reader.onload = function (e) {
          var body = '';

          body += '--' + boundary + crlf;
          body +=
            'Content-Disposition: form-data; name="' +
            fieldName +
            '"; filename="' +
            escape(file.name) +
            '"' +
            crlf;
          body += 'Content-Type: ' + file.type + '' + crlf;
          body += 'Content-Transfer-Encoding: base64' + crlf;
          body += crlf;
          body +=
            e.target.result.substring(e.target.result.indexOf(',') + 1) + crlf;

          body += '--' + boundary + '--';

          var head = '';
          head += 'POST /upload HTTP/1.1' + crlf;
          head += 'Host: localhost:8080' + crlf;
          head +=
            'Content-Type: multipart/form-data; boundary=' +
            boundary +
            '' +
            crlf;
          head += 'Content-Length: ' + body.length + '' + crlf;

          cb(null, head + crlf + body);
        };

        reader.readAsDataURL(file);
      }
    </script>
  </head>

  <body>
    <form action="" onsubmit="return form_submit();">
      <label>File: <input id="fileInput" type="file" /></label><br />
      <label>Field: <input id="fieldInput" type="text" value="file" /></label
      ><br />
      <button type="submit">Ok!</button><br />
      <label
        >Request:
        <textarea
          id="resultOutput"
          readonly="readonly"
          rows="20"
          cols="80"
        ></textarea></label
      ><br />
    </form>
    <p>
      Don't forget to save the output with windows (CRLF) line endings!
    </p>
  </body>
</html>
